<template>
  <div id="app">
    <div>
      <span>全选:</span>
      <input type="checkbox" v-model='all' />
      <button  @click = 'check(falg)'>反选</button>
      <ul>
        <li v-for='item in arr' :key= 'item.id'>
          <input type="checkbox" v-model = 'item.checked'/>
          <span>{{item.name}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>


export default {
  name: 'App',
  data(){
    return{
      arr: [
          {
            name: "猪八戒",
            checked: false,
          },
          {
            name: "孙悟空",
            checked: false,
          },
          {
            name: "唐僧",
            checked: false,
          },
          {
            name: "白龙马",
            checked: false,
          },
        ],
        falg:'false',
    }
    },
   // 计算属性
    computed:{
      all:{
         get(){
            return this.arr.every(item=>item.checked)
         },
         set(value){
            this.arr.forEach(item  => item.checked = value)
         }
        
      }
    },
    methods:{
      check(a){
       this.falg = !this.falg
      console.log(a);
      this.arr.forEach(item  => item.checked = a)
      }
    }
   }

</script>

<style>
  </style>

